<template>
	<!-- 首页 -->
	<div class="index">

		<dv-full-screen-container>
			<div class="index_title">
				<div class="index_title_nei">
					<el-button type="primary" class="btn" @click="goAll">总 览</el-button>
					<dv-decoration-3 style="width:250px;height:30px;display: inline-block;" />摄像头识别数据<dv-decoration-3
						style="width:250px;height:30px;display: inline-block;" />

				</div>
			</div>
			<div class="index_date">
				<span class="cur-date" v-html="dateFormatStr"></span>
			</div>
			<div class="index_line">
				<dv-decoration-10 style="width:100%;height:5px;" />
			</div>
			<div class="index_center">
				<el-tabs class="single-tabs" v-model="activeName" type="card" @tab-click="handleClick">
					<el-tab-pane :label="item.label" :name="item.id" v-for="(item,index) in tanPaneList" :key="index">
						<div v-if="activeName===item.id">
							<div class="index_center_top">
								<div class="index_center_top_left" v-loading="plugloading" element-loading-text="拼命加载中"
									element-loading-spinner="el-icon-loading"
									element-loading-background="rgba(0, 0, 0, 0.8)">
									<dv-border-box-8 :color="[ '#052470']" class="borderBox">
										<!-- {{pluginShow}}:style="{ display: pluginShow ? 'block' : 'none' }"  :id="'div-' + index" -->
										<!-- <div v-if="activeName===item.ip"   id="plugin"  class="plugin" v-for="(item,index) in tanPaneList" :key="index" ></div> -->
										<div id="divPlugin" class="plugin"
											:style="{ display:dialogPlugShow?'block':'none' }"></div>
									</dv-border-box-8>
								</div>
								<div class="index_center_top_right">
									<div class="right_left">
										<dv-border-box-8 :color="[ '#052470']" class="borerBox">
											<div class="biaoBox">
												<div id="myChart" :style="{ width: '400px', height: '300px' }"></div>
											</div>
										</dv-border-box-8>
									</div>
									<div class="right_right">
										<dv-border-box-8 :color="[ '#052470']" class="borerBox">
											<div class="biaoBox"> 暂无数据 </div>
										</dv-border-box-8>
									</div>
								</div>
							</div>
							<div class="index_center_bottom">
								<div class="index_center_bottom_left" v-loading="loading" element-loading-text="拼命加载中"
									element-loading-spinner="el-icon-loading"
									element-loading-background="rgba(0, 0, 0, 0.8)">

									<el-table class="myTable" :data="tableData" border
										style="width: 100%;height: 240px;" :cell-style="{borderColor:'#052470'}"
										:header-cell-style="{borderColor:'#052470'}">
										<el-table-column prop="createTime" label="时间">
										</el-table-column>
										<el-table-column prop="identificationValue" label="数值">
										</el-table-column>
										<el-table-column prop="status" label="状态">
											<template slot-scope="scope">
												{{ getStatusText(scope.row.status) }}
											</template>
										</el-table-column>
									</el-table>
									<!-- v-show="total > 0" -->
									<pagination style="display: flex; flex-direction: row-reverse" v-show="total > 0"
										:total="total" :pageSizes="[4]" :page.sync="listQuery.current"
										:limit.sync="listQuery.size" @pagination="handleRefresh" />
								</div>
								<div class="index_center_bottom_right">
									<div class="rightBtn" @click="goHis">历史数据</div>
									<div id="myLineChart" :style="{ width: '100%', height: '290px' }"></div>
								</div>
							</div>
						</div>

					</el-tab-pane>

				</el-tabs>
			</div>
		</dv-full-screen-container>


		<el-dialog title="历史数据" :visible.sync="dialogVisible" width="40%" :appendToBody="true" class="myDia">
			<el-form :inline="true" :rules="rules" :model="formInline" ref="formInline" class="demo-form-inline">
				<el-form-item label="开始时间" prop="startTime">
					<el-date-picker v-model="formInline.startTime" type="datetime" placeholder="选择开始时间"
						@change="checkDuration">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="结束时间" prop="endTime">
					<el-date-picker v-model="formInline.endTime" type="datetime" placeholder="选择结束时间"
						@change="checkDuration">
					</el-date-picker>
				</el-form-item>
				<el-form-item>

					<el-button class="hisbtn" @click="onSubmit('formInline')">查询</el-button>
				</el-form-item>
			</el-form>
			<el-divider style="background-color: #fff;"></el-divider>

			<div>
				<div id="diaChart" :style="{ width: '100%', height: '300px' }"></div>
			</div>
			<pagination style="display: flex; flex-direction: row-reverse" v-show="diaTotal > 0" :total="diaTotal"
				:pageSizes="[1500,3000]" :page.sync="diaListQuery.current" :limit.sync="diaListQuery.size"
				@pagination="diaHandleRefresh" />

		</el-dialog>





		<!-- 		<div id="divPlugin" class="plugin" style="width: 500px;height: 300px;"></div>
		
		
		<button @click="Login">登录</button>
		<button @click="see">预览</button>
		<button @click="noSee">停止预览</button>
		<button @click="Logout">退出</button>
		<button @click="breakdom">销毁</button>
		<button @click="init">初始化</button> -->




	</div>
</template>

<script>
	import * as echarts from "echarts";
	import {
		dateFormat
	} from '@/utils/time.js';
	import Pagination from "../../components/Pagination/index.vue";
	export default {
		components: {
			Pagination,
		},
		data() {
			return {

				tanPaneList: [
					// {
					// 	label: '二号',
					// 	name: 'second',
					// 	ip: '192.168.5.205', //设备IP
					// 	iPrototocol: 1, //http 协议 1表示 http协议 2 表示 https协议
					// 	port: '80', //登录设备 端口号
					// 	username: 'admin', //用户
					// 	password: 'jk123456' //密码
					// },
					// {
					// 	label: '一号',
					// 	name: 'first',
					// 	ip: '192.168.1.242', //设备IP
					// 	iPrototocol: 1, //http 协议 1表示 http协议 2 表示 https协议
					// 	port: '80', //登录设备 端口号
					// 	username: 'admin', //用户
					// 	password: 'jk123456' //密码

					// },

				],

				activeName: '',
				nowIndex: 0,
				oldIndex: null,
				tableData: [],
				total: 0,
				listQuery: {
					current: 1,
					size: 4,
				},
				loading: false,
				timer: null,
				dateFormatStr: "",
				timeTimer: null,
				pluginShow: true,
				plugloading: false,
				dialogVisible: false,
				dialogPlugShow: true,
				diaTotal: 0,
				formInline: {
					startTime: dateFormat(new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime()), // 开始时间
					endTime: dateFormat(new Date()), // 结束时间,
				},
				rules: {
					startTime: [{
						required: true,
						message: '请选择开始时间',
						trigger: 'change'
					}],
					endTime: [{
						required: true,
						message: '请选择结束时间',
						trigger: 'change'
					}]
				},
				diaListQuery: {
					current: 1,
					size: 1500,
				},

			}
		},
		created() {
			this.getDeviceList()
			this.getTime()
			setTimeout(() => {
				this.drawYi()
				this.drawLine()
				this.init()
				this.newplay()
				this.getTabList()
			}, 1000)
			
			
		},
		beforeDestroy() {
			this.Logout(this.nowIndex)
			this.noSee()
			this.allX()
			this.dialogPlugShow=false
		},
		destroyed() {
			setTimeout(() => {
				this.breakdom()
			}, 100)
		},
		mounted() {
			this.timeTimer = setInterval(() => {
				this.dealWithTime(new Date());
			}, 1000);
		},
		watch: {
			nowIndex(newval, oldval) {
				this.oldIndex = oldval
			},
			dialogVisible(newval, oldval) {
				if (newval === false) {
					this.drawYi()
					this.drawLine()
					this.init()
					this.newplay()
					this.getTabList()
				}
			}
		},
		methods: {
			checkDuration() {
				if (this.formInline.startTime && this.formInline.endTime) {
					const start = new Date(this.formInline.startTime);
					const end = new Date(this.formInline.endTime);
					const diff = end.getTime() - start.getTime();
					const maxDuration = 3 * 24 * 60 * 60 * 1000; // 3天的毫秒数
					if (diff > maxDuration) {
						this.$message.error('时间范围不能超过三天');
						this.formInline.endTime = ''; // 清空结束时间或者设置为合理的时间
					}
				}
			},
			onSubmit(formName) {

				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.diaListQuery.current = 1
						this.getHisCharts()
					} else {
						console.log('error submit!!');
						return false;
					}
				});

			},
			diaHandleRefresh() {
				this.getHisCharts()
			},
			// 总览
			goAll(){
				this.$router.push('/allCamera');
			},
			// 历史画图
			async getHisCharts() {
				try {
					const params = {
						current: this.diaListQuery.current,
						size: this.diaListQuery.size,
						startTime: this.formInline.startTime,
						endTime: this.formInline.endTime,
						ip: this.tanPaneList.find(item => item.id === this.activeName).ip,
						instrumentId: this.activeName 
					}
					const res = await this.$request.getLineChart(params)
					if (res.data.code === 200) {
						this.diaTotal = res.data.result.totalRows
						let myChart = this.$echarts.init(document.getElementById("diaChart"));
						myChart.setOption({
							tooltip: {
								trigger: 'axis'
							},
							xAxis: [{
								type: 'category',
								data: res.data.result.times,
								axisLine: {
									lineStyle: {
										color: "#FFF"
									}
								}
							}],
							yAxis: [{
								type: 'value',
								splitNumber: 4,
								min: this.tanPaneList.find(item => item.id === this.activeName)
									.min,
								max: this.tanPaneList.find(item => item.id === this.activeName).max,
								interval: this.tanPaneList.find(item => item.id === this
										.activeName)
									.dataType === '1' ? 100 : 0.5,
								splitLine: {
									lineStyle: {
										type: 'dashed',
										color: '#FFF'
									}
								},
								axisLine: {
									show: false,
									lineStyle: {
										color: "#FFF"
									},
								},
								nameTextStyle: {
									color: "#999"
								},
								splitArea: {
									show: false
								}
							}],
							dataZoom: [{
									show: true,
									realtime: true,
									start: 0,
									end: 70,
									xAxisIndex: [0, 1]
								},
								{
									type: 'inside',
									realtime: true,
									start: 0,
									end: 70,
									xAxisIndex: [0, 1]
								}
							],
							series: [{
								name: this.tanPaneList.find(item => item.id === this
										.activeName)
									.dataType === '1' ? '温度' : '压力',
								type: 'line',
								data: res.data.result.values,
								lineStyle: {
									normal: {
										width: 8,
										color: {
											type: 'linear',

											colorStops: [{
												offset: 0,
												color: '#A9F387' // 0% 处的颜色
											}, {
												offset: 1,
												color: '#48D8BF' // 100% 处的颜色
											}],
											globalCoord: false // 缺省为 false
										},
										shadowColor: 'rgba(72,216,191, 0.3)',
										shadowBlur: 10,
										shadowOffsetY: 20
									}
								},
								itemStyle: {
									normal: {
										color: '#fff',
										borderWidth: 10,
										/*shadowColor: 'rgba(72,216,191, 0.3)',
										shadowBlur: 100,*/
										borderColor: "#A9F387"
									}
								},
								smooth: true
							}]
						})
					}

				} catch (err) {
					console.log('err', err)
				}
			},
			// 历史数据
			goHis() {
				this.dialogVisible = true
				this.allX()
				this.getHisCharts()

			},
			dealWithTime(date) {
				let data = new Date(date);
				let Y = data.getFullYear();
				let M = data.getMonth() + 1;
				let D = data.getDate();
				let H = data.getHours();
				let Min = data.getMinutes();
				let S = data.getSeconds();
				let W = data.getDay();
				H = H < 10 ? "0" + H : H;
				Min = Min < 10 ? "0" + Min : Min;
				S = S < 10 ? "0" + S : S;
				switch (W) {
					case 0:
						W = "日";
						break;
					case 1:
						W = "一";
						break;
					case 2:
						W = "二";
						break;
					case 3:
						W = "三";
						break;
					case 4:
						W = "四";
						break;
					case 5:
						W = "五";
						break;
					case 6:
						W = "六";
						break;
					default:
						break;
				}

				this.dateFormatStr =
					"<span >" +
					" 日期: " +
					"</span>" +
					Y +
					"<span >" +
					" 年 " +
					"</span>" +
					M +
					"<span >" +
					" 月 " +
					"</span>" +
					D +
					"<span>" +
					" 日  " +
					"</span>" +
					"<span >" +
					" 星期" +
					W +
					"  " +
					"</span>" +
					"<span >" +
					H +
					":" +
					Min +
					":" +
					S;
				("</span>");

				/* setInterval("dealWithTime()",1000);*/
			},
			// 定时刷新
			getTime() {
				this.timer = setInterval(() => {
					this.getTabList()
					this.drawYi()
					this.drawLine()

				}, 1000 * 32);
				this.$once("hook:beforeDestroy", () => {
					clearInterval(this.timer);
				});
			},
			// 获取设备列表
			async getDeviceList() {
				try {
					const res = await this.$request.getDeviceList();
					if (res.data.code === 200) {
						this.tanPaneList = res.data.result
						if(this.tanPaneList.length>0){
							this.activeName=this.tanPaneList[0].id
						}
					} else {
						this.tanPaneList = []
						this.$message({
							type: 'error',
							message: res.data.message
						})
					}
				} catch (err) {
					console.log('err', err)

				}
			},
			// 状态
			getStatusText(status) {
				const texts = {
					'0': '识别失败',
					'1': '识别成功'

					// ... 更多状态文本
				};
				return texts[status] || '未知'; // 默认显示未知状态
			},
			// 分页
			handleRefresh() {
				this.getTabList()
			},
			// 获取表格
			async getTabList() {

				try {
					this.loading = true;
					const params = {
						current: this.listQuery.current,
						size: this.listQuery.size,
						startTime: dateFormat(
							new Date(
								new Date(new Date().toLocaleDateString()).getTime()
							).getTime()
						),
						endTime: dateFormat(new Date()),
						ip: this.tanPaneList.find(item => item.id === this.activeName).ip,
						instrumentId: this.activeName 
					}
					const res = await this.$request.getList(params);
					this.loading = false;
					if (res.data.code === 200) {

						this.tableData = res.data.result.resultData;
						this.total = res.data.result.totalRows;


					} else {
						this.loading = false;

						this.$message({
							type: 'error',
							message: res.data.message
						})
					}
				} catch (err) {
					console.log('err', err)

				}
			},
			// 画曲线图
			async drawLine() {
				try {
					const params = {
						current: 1,
						size: 3000,
						startTime: dateFormat(
							new Date(
								new Date(new Date().toLocaleDateString()).getTime()
							).getTime()
						),
						endTime: dateFormat(new Date()),
						ip: this.tanPaneList.find(item => item.id === this.activeName).ip,
						instrumentId: this.activeName 
					}
					const res = await this.$request.getLineChart(params)
					if (res.data.code === 200) {
						let myChart = this.$echarts.init(document.getElementById("myLineChart"));
						myChart.setOption({
							tooltip: {
								trigger: 'axis'
							},
							xAxis: [{
								type: 'category',
								data: res.data.result.times,
								axisLine: {
									lineStyle: {
										color: "#FFF"
									}
								}
							}],
							yAxis: [{
								type: 'value',
								splitNumber: 4,
								min: this.tanPaneList.find(item => item.id === this
									.activeName).min,
								max: this.tanPaneList.find(item => item.id === this
									.activeName).max,
								interval: this.tanPaneList.find(item => item.id ===
										this.activeName)
									.dataType === '1' ? 100 : 0.5,
								splitLine: {
									lineStyle: {
										type: 'dashed',
										color: '#FFF'
									}
								},
								axisLine: {
									show: false,
									lineStyle: {
										color: "#FFF"
									},
								},
								nameTextStyle: {
									color: "#999"
								},
								splitArea: {
									show: false
								}
							}],
							dataZoom: [{
									show: true,
									realtime: true,
									start: 0,
									end: 70,
									xAxisIndex: [0, 1]
								},
								{
									type: 'inside',
									realtime: true,
									start: 0,
									end: 70,
									xAxisIndex: [0, 1]
								}
							],
							series: [{
								name: this.tanPaneList.find(item => item.id ===
										this.activeName)
									.dataType === '1' ? '温度' : '压力',
								type: 'line',
								data: res.data.result.values,
								lineStyle: {
									normal: {
										width: 8,
										color: {
											type: 'linear',

											colorStops: [{
												offset: 0,
												color: '#A9F387' // 0% 处的颜色
											}, {
												offset: 1,
												color: '#48D8BF' // 100% 处的颜色
											}],
											globalCoord: false // 缺省为 false
										},
										shadowColor: 'rgba(72,216,191, 0.3)',
										shadowBlur: 10,
										shadowOffsetY: 20
									}
								},
								itemStyle: {
									normal: {
										color: '#fff',
										borderWidth: 10,
										/*shadowColor: 'rgba(72,216,191, 0.3)',
										shadowBlur: 100,*/
										borderColor: "#A9F387"
									}
								},
								smooth: true
							}]
						})
					} else {
						this.$message({
							type: 'error',
							message: res.data.message
						})
					}
				} catch (err) {
					console.log('err', err)
				}


			},
			// 画仪表
			async drawYi() {
				try {
					const res = await this.$request.getRealTime({
						ip: this.tanPaneList.find(item => item.id === this.activeName).ip,
						instrumentId: this.activeName 
					})

					if (res.data.code === 200) {
						let myChart = this.$echarts.init(document.getElementById("myChart"));
						myChart.setOption({
							tooltip: {
								formatter: "{a} <br/>{b} : {c}%"
							},
							// toolbox: {
							// 	feature: {
							// 		restore: {},
							// 		saveAsImage: {}
							// 	}
							// },
							series: [{
								name: this.tanPaneList.find(item => item.id ===
										this.activeName)
									.dataType === '1' ? '温度表' : '压力表',
								type: 'gauge',
								detail: {
									color: '#FFF',
									formatter: `{value}${this.tanPaneList.find(item => item.id === this.activeName).dataType==='1'?'℃':'MPa'}`
								},
								title: {
									color: '#FFF'
								},
								data: [{
									value: res.data.result[this
										.activeName],
									name: this.tanPaneList.find(item =>
											item.id === this
											.activeName).dataType ===
										'1' ? '温度' : '压力'
								}],
								radius: "100%",
								min: this.tanPaneList.find(item => item.id ===
									this.activeName).min,
								max: this.tanPaneList.find(item => item.id ===
									this.activeName).max,
								splitNumber: this.tanPaneList.find(item => item
										.id === this.activeName)
									.dataType === '1' ? 4 : 5, //刻度数量
								axisLabel: {
									show: true,
									color: '#FFF'
								},



								axisLine: {
									show: true,
									lineStyle: {
										color: [
											[1, new echarts.graphic
												.LinearGradient(0, 0, 1, 0,
													[{
															offset: 0.1,
															color: "#FFC600"
														},
														{
															offset: 0.6,
															color: "#30D27C"
														},
														{
															offset: 1,
															color: "#0B95FF"
														}
													])
											]
										]

									}
								}

							}]
						});
					}
				} catch (err) {
					console.log('err', err)
				}








			},
			// 销毁
			async allX() {

				// await WebVideoCtrl?.I_StopAllPlay();
				// await WebVideoCtrl?.I_Logout(this.tanPaneList[this.nowIndex].ip + '_' + this.tanPaneList[this.nowIndex].port);
				// await WebVideoCtrl?.I_DestroyPlugin();


				await this.noSee()
				await this.Logout(this.nowIndex)
				await this.breakdom()
			},
			// 进入页面
			newplay() {
				this.init()
				setTimeout(() => {
					this.Login(this.nowIndex)
					setTimeout(() => {
						this.see(this.nowIndex)
					}, 1000)
				}, 800)
			},
			handleClick(tab, event) {
				this.nowIndex = this.tanPaneList.findIndex(item => item.id === tab.name);
				this.allX()
				setTimeout(() => {
					this.newplay()
				}, 1000)
				this.getTabList()
				this.drawYi()
				this.drawLine()

			},
			// 销毁
			breakdom() {
				WebVideoCtrl.I_DestroyPlugin()
			},
			// 退出
			Logout(index) {
				this.pluginShow = false
				console.log('tuichu ', this.pluginShow)
				WebVideoCtrl.I_Logout(this.tanPaneList[index].ip + '_' + this.tanPaneList[
					index].port)
			},
			// 停止预览
			noSee() {
				WebVideoCtrl.I_Stop({
					iwndIndex: 1,
					success: () => {
						console.log('停止成功')
					}
				})
				// WebVideoCtrl.I_StopAllPlay() //全部
			},
			see(index) {

				WebVideoCtrl.I_StartRealPlay(this.tanPaneList[index].ip + '_' + this
					.tanPaneList[index].port, {
						success: () => {
							console.log('预览成功')
							this.pluginShow = true
							this.plugloading = false
						},
						error: function() {
							console.log('预览失败')
						}

					})
			},
			Login(index) {
				WebVideoCtrl.I_Login(this.tanPaneList[index].ip, 1, this.tanPaneList[
						index].port, this.tanPaneList[index].username, this
					.tanPaneList[index].password, {
						success: function() {
							console.log('登录成功')
						},
						error: function() {
							console.log('登录失败')
						}
					})
			},
			init() {
				this.plugloading = true
				// if(this.activeName==='192.168.5.205'){
				// 	WebVideoCtrl.I_InitPlugin({

				// 		iWndowType: 1, //画面分割数
				// 		bWndFull: true, //双击全屏
				// 		cbInitPluginComplete: function() {
				// 			WebVideoCtrl.I_InsertOBJECTPlugin("mydivPlugin").then((res) => {

				// 				WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
				// 					if (bFlag) {
				// 						alert('检测导新的插件版本')
				// 					}
				// 				})
				// 			}, () => {
				// 				alert('插件初始化失败')
				// 			})
				// 		}
				// 	})
				// }else{


				// console.log('kkkkk',`"${'div-' + this.nowIndex}"`)

				WebVideoCtrl.I_InitPlugin({

					iWndowType: 1, //画面分割数
					bWndFull: true, //双击全屏
					cbInitPluginComplete: function() {
						WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin').then((
							res) => {

							WebVideoCtrl.I_CheckPluginVersion().then((
								bFlag) => {
								if (bFlag) {
									alert('检测导新的插件版本')
								}
							})
						}, () => {
							alert('插件初始化失败')
						})
					}
				})
				// }


			}
		}
	}
</script>

<style>
	/* 移除边框和阴影 */
	.single-tabs .el-tabs__nav {
		border: none !important;
		box-shadow: none !important;
	}

	.single-tabs .el-tabs__header {
		border: none !important;
	}

	.single-tabs .el-tabs__item {

		margin-right: 13px !important;
		border-radius: 4px !important;
		/* 修改为您想要的文字大小 */
		font-size: 24px !important;
		color: #42E6DF !important;
		border: 1px solid #052470 !important;

	}


	/* 修改选中样式 */
	.single-tabs .el-tabs__item.is-active {
		border-radius: 4px !important;
		background-color: #2F1FFF !important;
		color: #fff !important;
		font-size: 24px !important;
		border: 1px solid #000 !important;


	}

	.el-dialog {
		background-color: #03143e;
		padding: 0 !important;
		/* 弹窗内部的背景色 */

	}

	.el-dialog__title {
		color: #fff !important;
	}

	.el-form-item__label {

		color: #fff !important;
		/* 设置 label 的字体颜色 */

	}

	.hisbtn {
		background-color: #2F1FFF !important;
		color: #fff !important;
		border: 0 !important;
	}
</style>



<style lang="scss" scoped>
	.index {
		background-color: #03143e;
		height: 100vh;


		&_title {
			position: relative;
			margin: 22px 0;
			text-align: center;
			font-size: 28px;
			color: #42E8E0;
			font-weight: 550;

			&_nei {
				position: relative;
				justify-content: center;
				align-items: center;
				display: flex;
				.btn {
					background-color: #42E8E0;
					border-color: #42E8E0;
					color: #fff;
					width: 120px;
					height:40px;
					position: absolute;
					left: 30px;
					top: 8px;
				}

			}

		}

		&_date {
			// float: right;
			font-size: 13px;
			position: absolute;
			right: 5%;
			top: 5px;
			color: #ccc;

		}

		&_center {
			padding: 22px 48px;
			box-sizing: border-box;


			&_top {
				display: flex;
				align-items: center;
				justify-content: space-between;


				&_left {
					height: 414px;
					flex: 40%;
					display: flex !important;
					justify-content: center !important;
					align-items: center !important;
					position: relative;

					.borderBox {
						height: 414px;
						width: 100%;
						position: relative;

						.plugin {
							width: 500px;
							height: 300px;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						}


					}


				}

				&_right {
					margin-left: 30px;
					flex: 55%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.right_left {
						height: 414px;
						flex: 40%;

						.borerBox {
							position: relative;

							.biaoBox {
								width: 400px;
								height: 300px;

								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
							}
						}
					}

					.right_right {
						margin-left: 30px;
						height: 414px;
						flex: 55%;

						.borerBox {
							position: relative;

							.biaoBox {

								text-align: center;
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								font-size: 24px;
								color: #42E8E0;
							}
						}
					}

				}
			}

			&_bottom {
				margin-top: 22px;
				display: flex;

				justify-content: space-between;

				&_left {
					// height: 200px;
					height: 30%;


					flex: 45%;
					text-align: center;

					::v-deep .el-table th,
					::v-deep .el-table tr,
					::v-deep .el-table td {
						background-color: transparent !important;
						color: #FFF !important;
					}

					::v-deep .el-table tr {
						height: 30px !important;
						line-height: 30px !important;
					}

					::v-deep .el-table td.el-table__cell,
					::v-deep .el-table th.el-table__cell.is-leaf {
						border-bottom: 1px solid #052470 !important;
					}


					::v-deep.el-table--enable-row-transition .el-table__body td.el-table__cell {
						background-color: transparent !important;
					}

					::v-deep.el-table td.el-table__cell div.cell {
						background-color: transparent !important;
					}

					::v-deep .el-table {
						background-color: transparent !important;
					}

					::v-deep .el-table__row {
						background-color: transparent !important;
					}


					::v-deep .el-table--border,
					.el-table--group {
						border: 1px solid #052470 !important;
					}

					/**
					改变表格内竖线颜色
					 */
					::v-deep .el-table--border td,
					.el-table--border th,
					.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
						border-right: 1px solid #052470 !important;
					}

					/**
					改变表格内行线颜色
					 */
					::v-deep .el-table td,
					.el-table th.is-leaf {
						border-bottom: 1px solid #052470 !important;
					}

					::v-deep .el-table thead tr th {
						border-color: #052470 !important;
					}

					::v-deep .el-table--border::after {
						width: 0px !important;
					}

					::v-deep .el-table__header-wrapper {
						background: none !important;
					}

					::v-deep .el-table::before {
						background: none !important;
					}



				}

				&_right {
					margin-left: 30px;
					flex: 45%;
					// height: 300px;
					height: 30%;
					text-align: center;
					border: 1px solid #052470;

					.rightBtn {
						margin: 5px 0 0 5px;
						// padding: 5px;
						box-sizing: border-box;
						border: 1px solid #000;
						width: 80px;
						height: 20px;
						line-height: 20px;
						border-radius: 5px;
						background-color: #2F1FFF !important;
						color: #fff !important;
						font-size: 13px;
						cursor: pointer;
					}

				}
			}
		}
	}
</style>